<template>
  <div class="map-others">
    <div class="map-others-top">
      <Select placeholder="选择功能" style="width: 200px" v-model="functionSelected">
        <Option value="1">属性</Option>
        <Option value="2">环境</Option>
        <Option value="3">互动</Option>
        <Option value="4">角色</Option>
      </Select>
    </div>
    
    <div class="map-others-content">
      <div class="map-others-content-wrapper" v-if="functionSelected === '1'">1</div>
      <div class="map-others-content-wrapper" v-if="functionSelected === '2'">
        <div v-if="mapData">
          <Collapse accordion simple v-model="envOpened">
            <Panel v-for="(env, index) in preparationsList('env')"
              v-bind:key="index"
              v-bind:name="'env' + index"
              v-bind:style="envStyle(env)">
              <span>{{ env.name }}</span>
              <div slot="content">
                <env-show
                  v-bind:select-enabled="true"
                  v-bind:env-data="env"
                  v-bind:hover-border-enabled="true"
                  selected-mode="drag"
                  v-on:on-selected="selectedHandler"></env-show>    
              </div>
            </Panel>
          </Collapse>
          <div style="text-align: center;">
            <Button class="cm-margin-10" type="primary" style="width: 80%;"
              v-on:click="addEnvHandler">选取环境</Button>            
          </div>
        </div>
      </div>
      <div class="map-others-content-wrapper" v-if="functionSelected === '3'">3</div>
      <div class="map-others-content-wrapper" v-if="functionSelected === '4'">4</div>
      
      
    </div>
    
    <Spin fix v-if="isLoading"></Spin>
    
    <Modal
      v-model="addEnvModal"
      title="添加环境"
      v-on:on-ok="addPreparation('env', addEnvModal)">
      <div style="height: 300px; overflow-y: scroll;">
        <CheckboxGroup v-model="envSelected">
          <Checkbox v-for="(env, index) in envList" v-bind:key="index" v-bind:label="env"></Checkbox>
        </CheckboxGroup>        
      </div>
    </Modal>
  </div>
</template>

<script src="./mapOthers.js"></script>

<style lang="stylus">
@import './mapOthers.styl'
</style>
